<template>
  <div :style="conheight">
    <div class="page" style="  background-color: white;">
      <Row :gutter="16">
        <i-col span="24">
          <Row>
            <i-col span="8">
              <Select class="query-form-el" clearable filterable v-model="formInline.orgId" placeholder="请输入企业"
                      :remote-method="remoteMethodSelectOrg"
                      @on-change="queryByName"
                      :default-label="defaultLabel"
                      :loading="orgLoading">
                <Option v-for="(option, index) in orgLists" :value="option.orgId" :key="index">{{ option.orgName }}
                </Option>
              </Select>
            </i-col>
            <i-col span="8">
              <Button @click="reset" class="ivu-btn-reset">重置</Button>
            </i-col>
          </Row>
        </i-col>
      </Row>
      <Row>
        <Col span="6">
          <div class="statisticsDiv1">
            <div class="rowDiv">
              <p>共计登录</p>
              <p>{{ loginInfo.sumLoginNum }}次</p>
            </div>
            <div class="rowDiv">
              <p>本月登录</p>
              <p>{{ loginInfo.monthLoginNum }}次</p>
            </div>
          </div>
        </Col>
        <Col span="6">
          <div class="statisticsDiv2">
            <div class="rowDiv">
              <p>安全例会</p>
              <p>{{ loginInfo.liHuiNum }}次</p>
            </div>
            <div class="rowDiv">
              <p>党委会</p>
              <p>{{ loginInfo.weiHuiNum }}次</p>
            </div>
          </div>
        </Col>
        <Col span="6">
          <div class="statisticsDiv3">
            <div class="rowDiv">
              <p>本年安全检查</p>
              <p>{{ loginInfo.enRptSuperviseInspectYearNum }}次</p>
            </div>
            <div class="rowDiv">
              <p>本月安全检查</p>
              <p>{{ loginInfo.enRptSuperviseInspectMonthNum }}次</p>
            </div>
          </div>
        </Col>
        <Col span="6">
          <div class="statisticsDiv4">
            <div class="rowDiv">
              <p>行为观察</p>
              <p>{{ loginInfo.observationYearNum }}次</p>
            </div>
            <div class="rowDiv">
              <p>本月观察</p>
              <p>{{ loginInfo.observationMonthNum }}次</p>
            </div>
          </div>
        </Col>
      </Row>
      <Row style="background-color: white;margin-bottom:10px;line-height: 40px;height: 40px;">
        <Col span="8">
          <p style="padding-left: 10%;">高层（副总以上）本月登录：{{ loginInfo.leaderLoginNum }}次</p>
        </Col>
        <Col span="8">
          <p style="padding-left: 10%;">中层（部长及副部长）本月登录：{{ loginInfo.managerLoginNum }}次</p>
        </Col>
        <Col span="8">
          <p style="padding-left: 10%;">基层员工本月登录：{{ loginInfo.staffLoginNum }}次</p>
        </Col>
        <!--            <Col span="4" offset="1">
                        <p style="padding-left: 10%;">最近一次登录：{{loginInfo.lastCompanyAdminLoginTime}}天前</p>
                    </Col>
                    <Col span="4" offset="1">
                        <p style="padding-left: 10%;">最近一次登录：{{loginInfo.lastCompanySaferLoginTime}}天前</p>
                    </Col>  -->
      </Row>
      <div style="float: right;">
        <Button class="ivu-btn-query"  icon="md-cloud-download" :loading="buttonLoading" @click="exportData">导出</Button>
      </div>
      <Table :loading="loading" class="tableClass" height="300" border no-data-text="没有查询到相关数据!"
             :columns="columns" :data="tableDatas"></Table>
      <Row class="chartRow">
        <Col span="12" style="padding-right: 8px;padding-left: 0;height: 100%">
          <div class="singleForm">
            <div class="standardTitleItem">
              <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
              <p class="formTitle">隐患整改</p>
            </div>
            <div style="width:100%;height:100%;flex-grow: 1" ref="yinHuanContainer"></div>
          </div>
        </Col>
        <Col span="12" style="padding-left: 8px;padding-right: 0;height: 100%">
          <div class="singleForm">
            <div class="standardTitleItem">
              <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
              <p class="formTitle">事故上报审批及时率</p>
            </div>
            <div style="width:100%;height:100%;flex-grow: 1" ref="shiguContainer"></div>
            <div class="waitDo">
              <span class="waitDoBlack">今日待办</span><span
                class="waitDoRed"> {{ loginInfo.procinstCountDay }}</span><span class="waitDoBlack">项</span><br>
              <span class="waitDoBlack">总待办</span><span
                class="waitDoRed">  {{ loginInfo.procinstCountYear }}</span><span class="waitDoBlack">项</span>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {sessionStorage} from '@/common/cacheUtils.js';

let cascaderDom = () => import('@/components/cascader-dom.vue');
;
import {Api} from '../../../api/index.js';

export default {
  data() {
    return {
      loading: false,
      buttonLoading: false,
      userInfo: sessionStorage('userId').getObject('userId'),
      orgLoading: false,
      defaultLabel: sessionStorage('userId').getObject('userId').companyName,
      orgLists: [],
      formInline: {
        orgId: ""
      },
      conheight: {
        height: ''
      },
      pagedata: {
        total: 0, //总条数
        fromPage: 1,//从n条开始
        pageSize: 10//每页多少条
      },
      loginInfo: {
        leaderLoginNum: 0,
        managerLoginNum: 0,
        staffLoginNum: 0,
        sumLoginNum: 0,
        monthLoginNum: 0,
        liHuiNum: 0,
        weiHuiNum: 0,
        observationYearNum: 0,
        observationMonthNum: 0,
        enRptSuperviseInspectYearNum: 0,
        enRptSuperviseInspectMonthNum: 0,
        companyAdminLoginNum: 0,
        companySaferLoginNum: 0,
        lastCompanyAdminLoginTime: 0,
        lastCompanySaferLoginTime: 0,
      },
      yinHuanContainerRef: null,
      shiguContainerRef: null,
      tableDatas: [],
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 80,
          align: 'center',
        },
        {
          title: '所属单位',
          key: 'orgName',
          minWidth: 80,
          align: 'center',
        },
        {
          title: '安全总监',
          key: 'userName',
          minWidth: 80,
          align: 'center',
        },
        {
          title: '集团安全审计',
          key: 'saAuditMission',
          minWidth: 80,
          align: 'center',
        },
        {
          title: '二级集团安全审计',
          key: 'twoSaAuditMission',
          minWidth: 80,
          align: 'center',
        },
        {
          title: '安全环保检查',
          key: 'safeCheck',
          minWidth: 80,
          align: 'center',
        },
        {
          title: '人员行为观察',
          key: 'observationCount',
          minWidth: 80,
          align: 'center',
        }
      ]
    };
  },
  mounted() {
    this.conheight.height = window.innerHeight - 120 + 'px';
    this.formInline.orgId = sessionStorage('userId').getObject('userId').companyId
    this.query(sessionStorage('userId').getObject('userId').companyId);
    this.$nextTick(() => {
      this.queryInfo(sessionStorage('userId').getObject('userId').companyId);
    });
  },
  methods: {
    remoteMethodSelectOrg(query) {
      if (query !== '') {
        this.orgLoading = true;
        this.$http.get(Api.queryOrgList + "?companyId=" + this.userInfo.companyId + "&orgName=" + query + "&fromPage=1&pageSize=1000").then(res => {
          this.orgLists = res.data.data;
          this.orgLoading = false;
        }).catch(e => {
          this.orgLoading = false;
          this.$Message.error('请求失败');
        })
      } else {
        this.orgLoading = false;
      }
    },
    queryByName(name) {
      for (var i = 0; i < this.orgLists.length; i++) {
        if (name == this.orgLists[i].orgId) {
          this.formInline.orgId = this.orgLists[i].orgId;
          this.query(this.orgLists[i].orgId)
          this.queryInfo(this.orgLists[i].orgId)
          return;
        }
      }
    },
    exportData(){
      this.buttonLoading = true;
      this.$http.get(Api.exportSecurityDirector + "/"  + this.formInline.orgId, {
        responseType: 'arraybuffer'      //告诉服务器我们需要的响应格式
      }).then((res) => {
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel"
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = "安全总监履职情况统计.xlsx" //标题
        aLink.click()
        document.body.appendChild(aLink)
        this.buttonLoading = false;
      }).catch(e => {
        this.buttonLoading = false;
        this.$Message.error("导出失败")
      })
    },
    reset() {
      this.formInline.orgId = sessionStorage('userId').getObject('userId').companyId
      this.query(sessionStorage('userId').getObject('userId').companyId)
      this.queryInfo(sessionStorage('userId').getObject('userId').companyId)
    },
    sizeChange(size) {
      this.pagedata.pageSize = size
      this.query(this.formInline.orgId)
    },
    pageChange(pagenum) {
      this.pagedata.fromPage = pagenum
      this.query(this.formInline.orgId)
    },
    queryInfo(companyId) {
      this.$http.get(Api.queryLeaderPerformance + "/" + companyId + "?page=" + this.pagedata.fromPage + "&pageSize=" + this.pagedata.pageSize).then((res) => {
        if (res.data.status == 200) {
          this.loading = false;
          this.loginInfo = res.data.data;
          {
            this.yinHuanContainerRef = echarts.init(this.$refs.yinHuanContainer);
            let option = this.getyinHuanContainerOption();
            var data = [];
            data.push({value: this.loginInfo.apsgInfo.finish, name: "已完成"});
            data.push({value: this.loginInfo.apsgInfo.nofinish, name: "未完成"});
            option.series[0].data = data;
            console.log(option.series[0])
            this.yinHuanContainerRef.setOption(option);
          }
          {
            this.shiguContainerRef = echarts.init(this.$refs.shiguContainer);
            let option = this.getContainerOption();
            var data = [];
            data.push({value: this.loginInfo.lateNum, name: "事故迟报"});
            data.push({value: this.loginInfo.normalNum, name: "事故上报"});
            option.series[0].data = data;
            this.shiguContainerRef.setOption(option);
          }
        }
      });
    },
    query(companyId) {
      this.loading = true;
      this.$http.get(Api.querySecurityDirector + "/" + companyId + "?page=" + this.pagedata.fromPage + "&pageSize=" + this.pagedata.pageSize).then((res) => {
        if (res.data.status == 200) {
          this.loading = false;
          this.tableDatas = res.data.data.tableDatas;
          this.pagedata.total = res.data.data.total;
        }
      });
    },
    getContainerOption() {
      let option = {
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 12
          }
        },
        legend: {
          orient: 'vertical',
          top: 'center',
          left: '60%',
          type: 'scroll',
          formatter: function (name) {
            // 获取legend显示内容
            let data = option.series[0].data;
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            if (total == 0) {
              return name + '  ' + tarValue + '  ' + '0%';
            } else {
              let p = (tarValue / total * 100).toFixed(2);
              return name + '  ' + tarValue + '  ' + p + '%';
            }
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              }
            },
            color: [
              this.linear(
                  '#82CDFF',
                  '#1999FF'
              ),
              this.linear(
                  '#FFBDC1',
                  '#CA65E5'
              )
            ],
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      };
      return option;
    },
    getyinHuanContainerOption() {
      let option = {
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 12
          }
        },
        legend: {
          orient: 'vertical',
          top: 'center',
          left: '60%',
          type: 'scroll',
          formatter: function (name) {
            // 获取legend显示内容
            let data = option.series[0].data;
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            if (total == 0) {
              return name + '  ' + tarValue + '  ' + '0%';
            } else {
              let p = (tarValue / total * 100).toFixed(2);
              return name + '  ' + tarValue + '  ' + p + '%';
            }
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              }
            },
            label: {
              show: false
            },
            color: [
              this.linear(
                  '#82CDFF',
                  '#1999FF'
              ),
              this.linear(
                  '#FFBDC1',
                  '#CA65E5'
              )
            ],
            emphasis: {
              label: {
                show: false,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      };
      return option;
    },
    linear(startColor, endColor) {
      // 4个方位参数依次为右、下、左、上，（0 0 0 1）代表从正上方开始
      // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
      return {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: startColor // 0% 处的颜色
        }, {
          offset: 1, color: endColor // 100% 处的颜色
        }],
        globalCoord: false // 缺省为 false
      }
    },
  }
};
</script>
<style scoped>

.page {
  height: 100%;
  display: flex;
  background-color: #F5F7F9;
  flex-direction: column;
}

.searchDiv {
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 70px;
}

.searchSelect {
  width: 300px;
}

.searchIcon {
  margin-left: 10px;
  cursor: pointer;
}

.statisticsDiv1 {
  background-size: 100% 100%;
  height: 110px;
  background-image: url("../../../assets/leaderPerformance/1.png");
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 3%;
}

.statisticsDiv2 {
  background-size: 100% 100%;
  height: 110px;
  background-image: url("../../../assets/leaderPerformance/2.png");
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 3%;
}

.statisticsDiv3 {
  background-size: 100% 100%;
  height: 110px;
  background-image: url("../../../assets/leaderPerformance/3.png");
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 3%;
}

.statisticsDiv4 {
  background-size: 100% 100%;
  height: 110px;
  background-image: url("../../../assets/leaderPerformance/4.png");
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 3%;
}

.rowDiv {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-family: HiraginoSansGB-W6, HiraginoSansGB;
  font-weight: normal;
  color: #FFFFFF;
  line-height: 27px;
  letter-spacing: 1px;
  padding-right: 10%;
  padding-left: 10%;
}

.tableClass {
  margin-top: 10px;
  padding-bottom: 10px;
  flex-grow: 1;
  overflow-y: auto;
}

.tableClass >>> .ivu-table-tip {
  overflow-x: hidden;
}

.chartRow {
  flex-grow: 10;
  margin-top: 10px;
  background-color: #F5F7F9;
}

.standardTitleItem {
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin-right: 20px;
}

.singleForm {
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.formTitle {
  font-size: 18px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: normal;
  color: #333333;
  line-height: 27px;
  flex-grow: 1;
}

.waitDo {
  position: absolute;
  right: 30px;
  top: 30px;
}

.waitDoBlack {
  height: 16px;
  font-size: 16px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: normal;
  color: #333333;
  line-height: 24px;
}

.waitDoRed {
  height: 16px;
  font-size: 16px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: normal;
  color: #F45454;
  line-height: 24px;
}

.demo-spin-col .circular {
  width: 25px;
  height: 25px;
}

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.demo-spin-col {
  height: 100px;
  position: relative;
  border: 1px solid #eee;
}
</style>